<template>
  <div>
    <el-button type="text" @click="lookAdmin">查看</el-button>
    <el-button type="text" @click="setAdmin">添加</el-button>
    <el-dialog title=" " :visible.sync="showLook">
      <el-table :data="userLis">
        <el-table-column prop="user.username" label="用户名" />
        <el-table-column prop="user.nick_name" label="昵称" />
        <el-table-column prop="role.name" label="角色" />
        <el-table-column prop="name" label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row.roles == 1" type="text" @click="set(row, 2)"
              >设为普通用户</el-button
            >
            <el-button
              v-else-if="row.roles == 2"
              type="text"
              @click="set(row, 1)"
              >设为管理员</el-button
            >
            <el-popover
              placement="top"
              width="80"
              trigger="click"
              v-model="row.visible"
            >
              <p>您确定要删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="row.visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="del(row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" type="text">
                <i class="el-icon-delete delete-btn" />
                删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!-- <ul class="user-lis">
        <li v-for="(e, i) in userLis" :key="i">
          <span class="name">{{ e.user.nickName }}</span>
          <el-button class="btn" icon="el-icon-delete" type="text" @click="del(e)" />
        </li>
      </ul> -->

      <span slot="footer" class="dialog-footer">
        <el-button class="none-type" @click="showLook = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title=" " :visible.sync="showSet">
      <div class="add-user-box">
        <el-select
          v-model="addForm.user_id"
          placeholder="选择用户"
          class="user-lis"
        >
          <el-option
            v-for="(e, i) in allUser"
            :key="i"
            :label="e.nick_name"
            :value="e.id"
          />
        </el-select>
        <el-select
          v-model="addForm.role_id"
          placeholder="设置角色"
          class="role-lis"
        >
          <el-option
            v-for="(e, i) in userRole"
            :key="i"
            :label="e.name"
            :value="e.id"
          />
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">添 加</el-button>
        <el-button class="none-type" @click="showSet = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  delOrganizationUser,
  putOrganizationUser,
  adduserRole,
  getuserRoleDetail,
} from "@/api/org";
import { userAll } from "@/api/user";

export default {
  data() {
    return {
      showLook: false,
      showSet: false,
      addForm: {},
      userLis: [],
      allUser: [],
    };
  },
  props: ["row", "userRole"],
  async created() {},
  methods: {
    async getData() {
      let res = await getuserRoleDetail({ organizationId: this.row.id });
      this.userLis = res.data;
      //console.log('userLis', this.userLis)
    },
    async lookAdmin() {
      this.getData();
      this.showLook = true;
    },
    async del(e) {
      //console.log('e', e)
      // this.$messageBox.confirm("确认删除该数据?", "提示", {
      //   type: 'warning',
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消"
      // }).then(async () => {
      let res = await delOrganizationUser({ id: e.id });
      if (res && res.data) {
        this.showLook = false;
        this.$message.success("删除成功");
      }
      // })
      //this.setAdmin()
      this.getData();
    },
    async set(row, value) {
      //console.log("set:",row,value)
      await putOrganizationUser({
        id: row.id,
        user_id: row.user_id,
        organization_id: row.organization_id,
        roles: value,
      });
      this.getData();
    },
    async setAdmin() {
      await this.getData();
      let userLisIds = this.userLis.map((e) => e.id);
      let res = await userAll();
      //console.log(userLisIds)
      //console.log(res.data)
      this.allUser = res.data.filter((e) => userLisIds.indexOf(e.id) == -1);
      this.showSet = true;
    },
    async submit() {
      // await addOrganizationUser({
      //     organization_id: this.row.id,
      //     ...this.addForm
      // })
      // this.addForm = { role: '2' }
      // this.showSet = false
      let res = await adduserRole({
        organization_id: this.row.id,
        ...this.addForm,
      });
      if (res && res.data) {
        this.showSet = false;
        this.addForm = {};
        this.$message.success("添加成功");
      }
    },
    formatterRole({ role }) {
      let roleMap = {
        1: "管理员",
        2: "普通用户",
      };
      return roleMap[role];
    },
    formatterAllRole(row) {
      let roleMap = {
        0: "超级管理员",
        1: "管理员",
        2: "普通用户",
      };
      return roleMap[row.roles];
    },
  },
};
</script>
<style lang="less" scoped>
.add-user-box {
  display: flex;
  padding: 20px;

  .user-lis {
    flex: 1;
  }

  .role-lis {
    width: 120px;
    margin-left: 20px;
  }
}

.user-lis {
  li {
    overflow: hidden;
    border-bottom: 1px solid #ccc;

    .name {
      float: left;
      line-height: 40px;
      min-width: 120px;
    }

    .btn {
      float: left;
    }
  }
}
</style>
